<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="jtable/themes/redmond/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" type="text/css" />
<link href="jtable/themes/lightcolor/gray/jtable.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="jtable/jquery.jtable.js"></script>
<script type="text/javascript" src="jtable/jtablesite.js"></script>
<script type="text/javascript" src="jtable/modernizr-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

<title>Insert title here</title>

<script type="text/javascript">
	$(document)
			.ready(
					function() {

						$('#JobTableContainer')
								.jtable(
										{
											title : 'Programs',
											paging : true, //Enable paging
											pageSize : 15,
											sorting : true, //Enable sorting
											defaultSorting : 'PrgName ASC',
											//openChildAsAccordion : true, //Enable this line to show child tabes as accordion style
											actions : {
												listAction : 'ListPrograms',
												deleteAction : 'DeleteProgram',
												updateAction : 'UpdateProgram',
												createAction : 'CreateProgram'
											},
											fields : {

												Param : {
													title : 'Parameter',
													width : '5%',
													sorting : false,
													edit : false,
													create : false,
													display : function(PrgData) {
														//Create an image that will be used to open child table
														var $img = $('<img src="image/note.png" title="Edit Parameter" />');
														//Open child table when user clicks the image
														$img
																.click(function() {
																	$(
																			'#JobTableContainer')
																			.jtable(
																					'openChildTable',
																					$img
																							.closest('tr'), //Parent row
																					{
																						title : PrgData.record.PrgName
																								+ ' -  Parameters',
																						actions : {
																							listAction : 'ListParam?PrgName='
																									+ PrgData.record.PrgName,
																							deleteAction : 'DeleteParam?PrgName='
																									+ PrgData.record.PrgName,
																							updateAction : 'UpdateParam?PrgName='
																									+ PrgData.record.PrgName,
																							createAction : 'CreateParam'
																						},
																						fields : {
																							Category : {
																								type : "hidden",
																								title : "Category",
																								defaultValue : PrgData.record.Category
																							},
																							PrgName : {

																								title : "Program Name",
																								type : "hidden",
																								defaultValue : PrgData.record.PrgName
																							},
																							ParamName : {
																								key : true,
																								title : "Name",
																								width : '10%'

																							},
																							ParamType : {
																								title : 'Type',
																								width : '10%',
																								options : {
																									0 : 'Switch',
																									1 : 'List',
																									2 : 'Key-Value',
																									3 : 'Value'
																								}
																							},
																							ParamDesc : {
																								title : 'Specification',
																								width : '40%',
																								type : 'textarea'
																							}

																						}
																					},
																					function(
																							data) { //opened handler
																						data.childTable
																								.jtable('load');
																					});
																});
														//Return image to show on the person row
														return $img;
													}
												},
												Category : {

													title : "Category",
													width : '20%'
												},
												PrgName : {
													key : true,
													title : "Program Name",
													width : '20%'
												},

												Author : {
													title : 'Author',
													width : '20%'

												},
												PrgDesc : {
													title : 'Description',
													width : '40%',
													type : 'textarea'

												}
											}
										});

						//Load student list from server
						$('#JobTableContainer').jtable('load');

					});
</script>
</head>
<body>
	<center>
		<div id="JobTableContainer"></div>
	</center>
</body>
</html>